import ViewPortWideIcon from '../assets/icon/viewport_wide.svg'
import CreditCardIcon from '../assets/icon/credit_card_delete.svg'
import TrackChangesIcon from '../assets/icon/track_changes.svg'
import ArrowRightIcon from '../assets/icon/arrow_right.svg'
import ArrowLeftIcon from '../assets/icon/arrow_left.svg'
import { useState } from 'react'
import { classnames } from '@/utils'

export default function Funds() {
  const [card1, setCard1] = useState(false)
  const [card2, setCard2] = useState(false)
  const [card3, setCard3] = useState(false)

  return (
    <div className="w-full h-full bg-blend-overlay relative funds-page md:overflow-scroll
      p-0
      pb-28 pt-[100px]
      md:p-[6vh] md:pb-[20vh]"
    >
      <div className='absolute left-0 bottom-0 h-[218px] w-full z-30 md:hidden pointer-events-none'
        style={{
          background: 'linear-gradient(180deg, rgba(214, 201, 193, 0) 0%, #D6C9C1 46.67%, #D6C9C1 100%)'
        }}>
      </div>
      <div className='h-full md:h-auto flex flex-col relative items-start z-20 overflow-scroll p-5 pb-20 md:p-0 md:overflow-visible'>
        <div className="font-pp-fragment text-3xl md:text-[88px] md:leading-normal">Funds</div>
        <div className='w-full flex-1 flex flex-col-reverse justify-end md:justify-between md:flex-col'>
          <div className="flex items-center flex-wrap md:flex-nowrap mt-10 md:mt-0">
            {/* card1 */}
            <div className={classnames('flex flex-col overflow-hidden pt-5',
              'w-full h-[260px]',
              'md:w-[370px] md:h-[420px] md:pt-6',
              'md:mr-10 rounded-lg border-[#C4AB9C] border-2',
              )}
              onMouseEnter={() => setCard1(true)}
              onMouseLeave={() => setCard1(false)}
            >
              <div className="font-pp-fragment mb-7 text-[2.625rem] leading-[1.3em] px-8 hidden md:block">
                <span>Liquid Token</span>
                <div className='flex items-center'>
                  <span>Fund</span>
                  <ViewPortWideIcon className="text-[2.5rem] ml-3" />
                </div>
              </div>
              <div className="font-pp-fragment text-xl flex items-center justify-between px-5 mb-6 md:hidden">
                <span>Liquid Token Fund</span>
                <ViewPortWideIcon className="text-3xl" />
              </div>
              <div className={classnames('flex-1 flex w-full duration-500 relative', card1 && '-translate-x-full')}>
                <div className='absolute left-0 top-0 h-full flex flex-col w-full px-5 md:px-8 pb-5 md:pb-6'>
                  <div className='flex-1 text-[10px] md:text-sm text-[#B77247] uppercase'>
                    The Redici Liquid Token Fund employs a strategy focused on decentralized finance, utilizing rate arbitrage, intertemporal arbitrage, and cross-currency arbitrage strategies to capitalize on price variations across different markets.
                  </div>
                  <div className='flex items-center text-[#B77247]' onClick={() => setCard1(true)}>
                    <span className='mr-2 font-medium mt-1'>DETAIL</span>
                    <ArrowRightIcon className="text-xs text-[#B77247]" />
                  </div>
                </div>
                {/* detail */}
                <div className='absolute left-full top-0 flex flex-col w-full h-full px-5 md:px-8 pb-5 md:pb-6'>
                  <div className='flex-1 text-[10px] md:text-sm text-[#B77247]'>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Liquidity:</div>
                      <div className='text-xs md:text-base font-bold	text-[#9B5020]'>Quarterly </div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Assets:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>Publicly traded tokens </div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Minimum Investment:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>$50,000</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Redemptions:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>Quarterly</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Management Fee:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>2%</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Performance Fee:</div>
                      <div className='text-xs md:text-base font-bold	text-[#9B5020]'>30%</div>
                    </div>
                  </div>
                  <div className='flex items-center text-[#B77247]' onClick={() => setCard1(false)}>
                    <ArrowLeftIcon className="text-xs text-[#B77247]" />
                    <span className='ml-2 font-medium mt-1'>BACK</span>
                  </div>
                </div>
              </div>
            </div>
            {/* card2 */}
            <div className={classnames('flex flex-col overflow-hidden pt-5 mt-5 md:mt-0',
              'w-full h-[260px]',
              'md:w-[370px] md:h-[420px] md:pt-6',
              'md:mr-10 rounded-lg border-[#C4AB9C] border-2',
              )}
              onMouseEnter={() => setCard2(true)}
              onMouseLeave={() => setCard2(false)}
            >
              <div className="font-pp-fragment mb-7 text-[2.625rem] leading-[1.3em] px-8 hidden md:block">
                <span>Venture</span>
                <div className='flex items-center'>
                  <span>Fund</span>
                  <CreditCardIcon className="text-[2.5rem] ml-3" />
                </div>
              </div>
              <div className="font-pp-fragment text-xl flex items-center justify-between px-5 mb-6 md:hidden">
                <span>Venture Fund</span>
                <CreditCardIcon className="text-3xl" />
              </div>
              <div className={classnames('flex-1 flex w-full duration-500 relative', card2 && '-translate-x-full')}>
                <div className='absolute left-0 top-0 h-full flex flex-col w-full px-5 md:px-8 pb-5 md:pb-6'>
                  <div className='flex-1 text-[10px] md:text-sm text-[#B77247] uppercase'>
                    The Redici Venture Fund provides investors with active management of companies developing services and products in the blockchain ecosystem, using an early-stage, venture-style approach.
                  </div>
                  <div className='flex items-center text-[#B77247]' onClick={() => setCard2(true)}>
                    <span className='mr-2 font-medium mt-1'>DETAIL</span>
                    <ArrowRightIcon className="text-xs text-[#B77247]" />
                  </div>
                </div>
                {/* detail */}
                <div className='absolute left-full top-0 flex flex-col w-full h-full px-5 md:px-8 pb-5 md:pb-6'>
                  <div className='flex-1 text-[10px] md:text-sm text-[#B77247]'>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Liquidity:</div>
                      <div className='text-xs md:text-base font-bold	text-[#9B5020]'>End of fund</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Assets:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>Venture Equity</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Minimum Investment:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>$150,000</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Redemptions:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>2 years</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Management Fee:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>2%</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Performance Fee:</div>
                      <div className='text-xs md:text-base font-bold	text-[#9B5020]'>30%</div>
                    </div>
                  </div>
                  <div className='flex items-center text-[#B77247]' onClick={() => setCard2(false)}>
                    <ArrowLeftIcon className="text-xs text-[#B77247]" />
                    <span className='ml-2 font-medium mt-1'>BACK</span>
                  </div>
                </div>
              </div>
            </div>
            {/* card3 */}
            <div className={classnames('flex flex-col overflow-hidden pt-5 mt-5 md:mt-0',
              'w-full h-[260px]',
              'md:w-[370px] md:h-[420px] md:pt-6',
              'md:mr-10 rounded-lg border-[#C4AB9C] border-2',
              )}
              onMouseEnter={() => setCard3(true)}
              onMouseLeave={() => setCard3(false)}
            >
              <div className="font-pp-fragment mb-7 text-[2.625rem] leading-[1.3em] px-8 hidden md:block">
                <span>Multi-Strategy</span>
                <div className='flex items-center'>
                  <span>Fund</span>
                  <TrackChangesIcon className="text-[2.5rem] ml-3" />
                </div>
              </div>
              <div className="font-pp-fragment text-xl flex items-center justify-between px-5 mb-6 md:hidden">
                <span>Multi-Strategy Fund</span>
                <TrackChangesIcon className="text-3xl" />
              </div>
              <div className={classnames('flex-1 flex w-full duration-500 relative', card3 && '-translate-x-full')}>
                <div className='absolute left-0 top-0 h-full flex flex-col w-full px-5 md:px-8 pb-5 md:pb-6'>
                  <div className='flex-1 text-[10px] md:text-sm text-[#B77247] uppercase'>
                    The Redici Multi-Strategy Fund provides investors with diversified exposure to the blockchain asset space by investing in venture equity, early-stage tokens, and liquid tokens.
                  </div>
                  <div className='flex items-center text-[#B77247]' onClick={() => setCard3(true)}>
                    <span className='mr-2 font-medium mt-1'>DETAIL</span>
                    <ArrowRightIcon className="text-xs text-[#B77247]" />
                  </div>
                </div>
                {/* detail */}
                <div className='absolute left-full top-0 flex flex-col w-full h-full px-5 md:px-8 pb-5 md:pb-6'>
                  <div className='flex-1 text-[10px] md:text-sm text-[#B77247]'>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Liquidity:</div>
                      <div className='text-xs md:text-base font-bold	text-[#9B5020]'>End of fund</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Assets:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>Venture Equity</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Minimum Investment:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>$150,000</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Redemptions:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>2 years</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Management Fee:</div>
                      <div className='text-xs md:text-base font-bold text-[#9B5020]'>2%</div>
                    </div>
                    <div className='flex items-center justify-between mb-1 md:mb-2'>
                      <div className='text-[10px] md:text-sm font-medium uppercase text-[#B77247]'>Performance Fee:</div>
                      <div className='text-xs md:text-base font-bold	text-[#9B5020]'>30%</div>
                    </div>
                  </div>
                  <div className='flex items-center text-[#B77247]' onClick={() => setCard3(false)}>
                    <ArrowLeftIcon className="text-xs text-[#B77247]" />
                    <span className='ml-2 font-medium mt-1'>BACK</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="w-full text-sm mt-10 md:mt-8 md:text-[1.6875rem] md:leading-[1.5em] md:max-w-[900px] font-light	">
            Our funds provide investors with a broad range of exposure to the crypto market, including illiquid venture capital assets such as early-stage tokens and multi-stage venture capital equity, as well as more liquid assets such as Bitcoin and other cryptocurrencies.
          </div>
        </div>
      </div>
    </div>
  )
}
